<template>
  <view class="content">
    <!-- 收获地址 -->
    <view class="header bg-white">
      <view class="cu_bar bg-white">
        <p>新增收货地址：</p>
        <view class="eye-form">
          <el-form
            ref="form"
            :model="form"
            label-width="90px"
            :rules="rules"
            @submit.native.prevent
          >
            <!--  -->
            <el-form-item label="收货人:" prop="consignee">
              <el-input
                v-model="form.name"
                placeholder="请输入收货人姓名"
              ></el-input>
            </el-form-item>
            <!--  -->
            <el-form-item label="地区:" prop="region">
              <!-- {{Address}} -->
              <el-cascader
                v-model="form.region"
                :options="Address"
                :props="{
                  expandTrigger: 'hover',
                  label: 'text',
                  value: 'value',
                  children: 'children',
                }"
              ></el-cascader>
            </el-form-item>
            <!--  -->
            <el-form-item label="手机号:" prop="mobileNumber">
              <el-input
                v-model="form.name"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <!--  -->
            <el-form-item label="详细地址:" prop="address">
              <el-input
                type="textarea"
                v-model="form.desc"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
            <!--  -->
            <el-form-item label="">
              <el-checkbox
                label="设置为默认收货地址 设置后系统将在下单时自动选择该收货地址"
                name="type"
              ></el-checkbox>
            </el-form-item>
            <!--  -->
            <el-form-item>
              <el-button
                type="primary"
                style="width: 360rpx; height: 68rpx"
                class="btn bg-success"
                @click="saveForm"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </view>
      </view>
    </view>

    <view class="foot bg-white p-4">
      <view class="tip">已经保存了0条地址，还能保存20条</view>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="收货人" width="180" align="center">
        </el-table-column>
        <el-table-column
          prop="name"
          label="所在地址"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="address" label="手机/电话" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template>
            <el-button size="mini">删除</el-button>
            <el-button size="mini" type="danger">修改</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="" label="" align="center">
          <template slot-scope="{ row }">
            <p v-if="row.moren == false">设为默认地址</p>
            <view class="mo_ren bg-success text-white bg-success" v-else
              >默认地址</view
            >
          </template>
        </el-table-column>
      </el-table>
    </view>
  </view>
</template>

<script>
import { CityData } from "../../../static/js/city.js";
const { Address } = CityData();
export default {
  name: "delivery_address",
  props: {
    Address: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      form: {
        name: "",
        region: "",
        type: [],
        desc: "",
        value: "",
        Address: Address(),
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          moren: true,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          moren: false,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          moren: false,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          moren: false,
        },
      ],
      rules: {
        consignee: [
          { required: true, message: "收货人：不能为空！", trigger: "blur" },
        ],
        region: [
          { required: true, message: "地区：不能为空！", trigger: "blur" },
        ],
        mobileNumber: [
          { required: true, message: "手机号：不能为空！", trigger: "blur" },
        ],
        address: [
          { required: true, message: "详细地址：不能为空！", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    saveForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，继续处理保存逻辑
          // ...
        } else {
          // 表单验证未通过，进行相应处理
          // ...
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  .header {
    width: 100%;
    .cu_bar {
      width: 1470rpx;
      padding: 60rpx 40rpx;
      text-align: left;
      p {
        width: 100%;
        font-size: 32rpx;
        color: #333;
        margin-bottom: 40rpx;
      }
      .eye-form {
        min-width: 360px;
        max-width: 560px;
        .btn {
          border-radius: 0;
          border: none;
        }
      }
    }
  }
  .foot {
    margin-top: 20px;
    width: 2000rpx;
    // padding: 40rpx;
    box-sizing: border-box;
    .tip {
      padding: 24px 40rpx;
      background: #fff4ed;
      font-size: 28rpx;
      color: #222;
    }
    .mo_ren {
      height: 68rpx;
      line-height: 68rpx;
      font-size: 32rpx;
      letter-spacing: 0.8px;
    }
  }
}
</style>
